<template>
  <div class="board" style="width: 100%">
    <div class="home">
      <grid-layout
        :layout="layoutData"
        :col-num="3"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
      >
        <grid-item
          v-for="(item, index) in layoutData"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
        >
          <span>
            {{ item.name }}{{ index }}
          </span>
        </grid-item>
      </grid-layout>
      <qrcode-vue :value="value" :size="size" level="H" />
      <vue-qr :logoSrc="imageUrl" text="http://baidu.com" :size="200" :logoScale="0.3" :logoMargin="5" :margin="10"></vue-qr>
      <!-- <el-button type="primary" @click="exportData">导出表格</el-button> -->
      <export-table :columns="columns" :tableData="tableData">
        <el-button type="primary" @click="exportData">导出表格</el-button>
      </export-table>
    </div>
  </div>
</template>
<script>
import layoutData from '../../plugins/layoutData.json'
import { export2Excel } from '../../common/util'
import exportTable from '@/components/common/exportTable/exportTable'
import VueGridLayout from 'vue-grid-layout'
import QrcodeVue from 'qrcode.vue'
import vueQr from 'vue-qr'
const GridLayout = VueGridLayout.GridLayout
const GridItem = VueGridLayout.GridItem
export default {
  data() {
    return {
      // 布局数据
      layoutData: [
        { x: 0, y: 0, w: 1, h: 2.5, i: '0'},
        { x: 1, y: 0, w: 1, h: 2.5, i: '1'},
        { x: 2, y: 0, w: 1, h: 2.5, i: '2'},
        { x: 0, y: 1, w: 1, h: 2.5, i: '4'},
        { x: 1, y: 1, w: 1, h: 2.5, i: '5'},
        { x: 2, y: 1, w: 1, h: 2.5, i: '6'},
      ],
      layoutConfig: {
        height: 100, // 默认高度
        dialogVisible: false, // 是否可拖拽或改变大小
      },
      value: 'http://baidu.com',
      size: 300,
      imageUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/PgabTsicy8sA1WIZLAODqDFca64zq63b88lXs1k6kRknOc8ytgjMoy7iaVB5khOT4g9YTEewWIpN9BYXXfTZVAibw/132',
      columns: [{title: '', key: 'date'},{title: '', key: 'name'},{title: '', key: 'address'}],
      tableData: [
        {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ]
    }
  },
  components: {
    GridLayout,
    GridItem,
    QrcodeVue,
    vueQr,
    exportTable
  },
  methods: {
    // exportData () {
    //   export2Excel(this.columns, this.tableData)
    // },
    exportData () {
      console.log(this.columns)
      console.log(this.tableData)
    },
    init() {
      // this.layoutData = layoutData.mainData
      this.layoutData = this.layoutData.map((item, index) => {
        item.name = index + ''
        return item
      })
    },
  },
  created() {
    this.init()
  },
  watch: {
    layoutData () {
      console.log(this.layoutData)
    }
  }
  
}
</script>
 
 
<style lang="less" scoped>
.vue-grid-item {
  background: aquamarine;
}
</style>